<template>
       <el-form label-position="top">
        <el-form-item label="项目类型">
          <mdp-select  itemCode="projectType" v-model="projectType" width="100%" @change="onProjectTypeChange"/>
        </el-form-item>
        <el-form-item label="分类预览"> 
          <div style="width:800px;">   
                <el-steps v-if="categorys && categorys.length>0"
                    direction="vertical" space="60px"
                > 
                  <el-step style="cursor:pointer;" @click="onStepClick(item)" :title="item.name" :status="'wait'" v-for="(item,index) in categorys" :key="index">
                    <template #icon>
                      <icon :icon="item.imageUrls"/>
                    </template>  
                    </el-step>
                </el-steps>  
                  
        
          </div>
        </el-form-item>
        <el-form-item label="说明">
           <el-alert type="warning"> <icon icon="ep:bell"/>将把上面的各节点作为文档分类进行提交</el-alert>
        </el-form-item>
       </el-form>
      <div class="footer"><el-button type="primary" @click="doBatchAddCategory" :disabled="load.init">提交</el-button></div>
   
</template>

<script>
import util from '@/components/mdp-ui/js/util' //全局公共库

import {
  batchAddCategory
} from '@/api/mdp_pub/larc.js'
 
 //新增界面 


import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'
 

export default {
  props: ['categoryType','crelyType','crelyId','crelyStype','crelySid','xmType'],
  
  emits:['init'],
  computed: {
    ...mapState(useUserStore, ['userInfo', 'roles']),
     
  },
  watch: { 
  },
  data() {
    return {
      load:{init:false}, 
      projectType:'',  
      categorys:[],
    }
  }, //end data
  methods: {  
    doBatchAddCategory(){
      this.load.init=true
      batchAddCategory(this.categorys).then(res=>{
        var tips = res.tips
        this.load.init=false
        if(tips.isOk){
          this.$notify.success("初始化成功") 
          this.$emit('init')
        }else{
          this.$notify.error(tips.msg)
        }
      })
    },
    onProjectTypeChange(projectType){
      this.$mdp.getDictOptions('projectPhasePlans'+projectType).then(res=>{ 
      this.categorys=res.map(k=>{
          return {
            id:this.$mdp.shortCode(this.$mdp.createSeqNo('F')),
            name:k.name,  
            pid:'0',  
            isLeaf:'0',
            limitType:'2', 
            sortOrder:k.seqOrder, 
            imageUrls:k.icon, 
            crelyType:this.crelyType,
            crelyId:this.crelyId,
            crelyStype:this.crelyStype,
            crelySid:this.crelySid,
            categoryType:this.categoryType
          }
        })
      })
    },
    onStepClick(item){  
    },  
  }, //end methods
  components: {
  },
  mounted() { 
    if(this.xmType){
      this.projectType=this.xmType
      this.onProjectTypeChange(this.xmType)
    }
  }
}
</script>

<style lang="scss" />
